import React from 'react';
import { Table, Input,Tag, Space,Popconfirm,message,Card } from 'antd';
import axios from 'axios';
import JsonData from './1.json'
import 'antd/dist/antd.css'; 
const { Search } = Input;



export default class Manage extends React.Component {

    state = {
        data:[],
        allpage:'',
        search:"", 
    }

    //获取全部的数据
    initData = (page) => {
        // axios.get('/articles/getContentByPage',
        // {params:{
        //     page:page
        // }}
        // ).then(
        //     (res) =>{
        //         console.log(res.data.data);
                
        //         if(res.data.data[0]){
        //             this.setState({data:res.data.data,allpage:res.data.data[0]['num']});
        //             console.log(this.state.allpage);
        //         }else{
        //             console.log(res.data)
        //         }  
        //     } 
        // )
        console.log(JsonData.data,JsonData.data[0]['num']);
        this.setState({data:JsonData.data,allpage:JsonData.data[0]['num']})
        console.log(this.state.data,this.state.allpage)
    }

    componentDidMount(){
        //初始化全部的数据
        this.initData()
        
    }


    //实现文章删除的功能
    confirm = (item) => {
        //用于点击确定的时候删除
        //1.首先获取文章的id，发送数据进行请求
        //item.id  文章的名字
        axios.post('/articles/delete', {"article_id":item.id}).then((res)=>{
            if(res.data.code == '0'){
                message.success('删除成功');
                this.initData()
            }else{
                message.error('删除失败');
            }
        })
      }
      
    //实现文章删除取消的功能
    cancel = (e) => {
        message.error('取消删除');
      }
      
    //对搜索的值进行赋值
    searchChange = (e) =>{
        this.setState({search:e.target.value});
    }


    //搜索功能的回调函数，目的是为了重新渲染数据
    onSearch = () =>{
        //进行请求接口进行访问
        axios.post('/search',{
            "keyword":this.state.search
        }).then((res)=>{
            this.setState({data:res.data.data,allpage:res.data.data[0]['num']})

        })
        
        
    }

    //编辑功能，获取文章的id，从数据库中进行查询文章，并返回到编辑器中
    editArticle = (item) => {
        this.props.history.push('/create/'+item.id)
    }

    //分页功能，对当前页码进行处理
    pageChange = (page) => {

        this.initData(page.current)
    }
    

   
    render() {

       


        //设置表头搜索文章的一栏
        let sea = (
            <Search
                value={this.state.search}
                placeholder="请输入检索标题"
                allowClear
                enterButton="搜索"
                size="large"
                onChange={this.searchChange}
                onSearch={this.onSearch}
            />
        )

            
        //对table组件的列进行操作
        const columns = [
            {
              title: '序号',
              dataIndex: 'id',
              render: (text,record,index)=>{
                return (
                    <span>{index+1}</span>
                )
              },
            },
            {
              title: '文章名称',
              dataIndex: 'title',
            },
            {
              title: '发表时间',
              dataIndex: 'time',
            },
            {
              title: '分类',
              dataIndex: 'category',
              render:(text,record,index)=>{
                  let color;
                  let colorClass = record.category
                  switch(colorClass){
                    case "音乐":
                        color = 'green'
                        break;
                    case "运动":
                        color='cyan'
                        break;
                    case "游戏":
                        color='purple'
                        break;
                    case "宠物":
                        color="orange"
                        break;
                    default:
                        color = ''      
                  }
                
                  return (
                    <Tag color={color} key={index}>
                        {text}
                     </Tag>
                  )
              }
            },
            {
              title: '操作',
              dataIndex:'4',
              render: (text, record) => (
                <Space size="middle">
                    
                    <a onClick={() =>{this.editArticle(record)}} href="#">编辑</a>
                  
                    <Popconfirm
                      
                        title="你确定要删除这篇文章吗？"
                        onConfirm={()=>{this.confirm(record)}}
                        onCancel={this.cancel}
                        okText="确定"
                        cancelText="取消"  
                    >
                        <a style={{color: 'red'}} href="#">删除</a>
                    </Popconfirm>
                </Space>
              ),
            },
          ];

        
        return (
            
            <div>
                <div className="site-card-border-less-wrapper">
                    <Card title={sea}  bordered={false} > 
                    <Table 
                        rowKey={record => record.id}
                        columns={columns} 
                        dataSource = {JsonData.data}
                        pagination={{ 
                            position:['bottomCenter'],
                            total :this.state.allpage,
                            current:this.state.page,
                            onChange :this.pageChange
                        }}
                        
                    /> 
        
                    </Card>
                </div>
                
           </div>
        )
    }
}

